<template>
	<div class="content_wrapper">
		<el-container>
			<el-aside width="300px">
				<div class="detail-left">
					<div class="product-board" style="border: 1px solid #CCCCCC;margin-top: 20px;">
						<img :src="productIcon">
						<ul>
							<router-link v-for="(item,index) in products" :key='item.index' :to="{ path: item.path }" tag="li" active-class="active">
								{{ item.name }}
							</router-link>
						</ul>
						<!--<ul>
							<li v-for="item in products">
								{{ item.name }}
							</li>
						</ul>-->
					</div>
				</div>
			</el-aside>

			<el-container>
				<el-main>
					<div class="index-right">
						<router-view>
						</router-view>
					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script type="text/javascript">
	export default {
		name: 'detail',
		components: {

		},
		data() {
			return {
				products: [{
						name: '数据统计',
						path: 'count',
						icon: require('../assets/images/1.png'),
						active: false
					},
					{
						name: '数据预测',
						path: 'forecast',
						active: false
					},
					{
						name: '流量分析',
						path: 'analysis',
						active: false
					},
					{
						name: '广告发布',
						path: 'publish',
						active: false
					}
				],
				imgMap: {
					'/detail/count': require("../assets/images/1.png"),
					'/detail/forecast': require("../assets/images/2.png"),
					'/detail/analysis': require("../assets/images/3.png"),
					'/detail/publish': require("../assets/images/4.png")
				}
			}
		},
		computed: {
			productIcon() {
				return this.imgMap[this.$route.path]
			}
		},
		created: function() {
			console.log(this.imgMap[this.$route.path])
		}
	}
</script>

<style>
	.content_wrapper {
		width: 1300px!important;
		margin: 0 auto!important;
	}
	
	.detail-left {
		float: left;
		width: 100%;
		text-align: center;
	}
	
	.detail-right {
		float: left;
		width: 980px;
		margin-left: 20px;
	}
	
	.product-board {
		background: #fff;
		padding: 20px 0;
	}
	
	.product-board ul {
		margin-top: 20px;
	}
	
	.product-board li {
		text-align: left;
		padding: 10px 15px;
		cursor: pointer;
	}
	
	.product-board li.active,
	.product-board li:hover {
		background: #4fc08d;
		color: #fff;
	}
	
	.product-board li a {
		display: block;
	}
	/*子页面的样式*/
	
	.index-right {
		margin: 10px 10px 0 10px;
		float: left;
		width: 900px;
	}
	
	.el-main {
		padding: 0!important;
	}
	
	.title {
		padding: 20px;
		font-size: 20px;
	}
	
	.sales-board-intro p {
		font-size: 14px;
		background: #f7fcff;
		color: #999;
		line-height: 1.8;
		padding: 10px 20px;
		margin-bottom: 10px;
	}
	
	.sales-board-form {
		padding: 20px 30px;
		font-size: 14px;
		color: #363636
	}
	
	.sales-board-line {
		padding-bottom: 20px;
	}
	
	.sales-board-line-left {
		width: 100px;
		display: inline-block;
	}
	
	.sales-board-line-right {
		position: relative;
		display: inline-block;
	}
	
	.sales-money {
		font-size: 20px!important;
		color: rgb(236 16 16)!important;
	}
	
	.index-right .el-container {
		background: #FFFFFF!important;
		margin-bottom: 20px!important;
	}
	
	.sales-board-des{
		padding: 10px 20px;
	}
	.sales-board-des p {
		font-size: 14px;
		margin-bottom: 10px;
		line-height: 1.8;
	}
	
	.sales-board-table th {
		background: #4fc08d;
		color: #fff;
	}
	.explain_title{
		padding: 20px 20px 20px 0;
		font-size: 20px;
	}
	.sales-board-table td {
		border: 1px solid #f0f2f5;
		padding: 15px;
	}
	.sales-board-des ul li{
		font-size: 16px;
		padding: 0 10px 10px 0;
	}
</style>